<template>
    <div class="container">
        <m-header :closeFn="onClose">{{barTitle}}</m-header>
        <div class="main">
            <div class="search-wrap">
                <van-search
                        v-model="searchValue"
                        show-action
                        shape="round"
                        placeholder="请输入搜索地点"
                >
                    <template #action>
                        <div>搜索</div>
                    </template>
                </van-search>
            </div>
            <div class="list-wrap">
                <m-list :total="total" :cur-num="list.length" v-model="loading" @load="getStation" :load-end="loadEnd">
                    <div :class="{height0: item.stop_name.indexOf(searchValue) < 0,'item-wrap': true}"  v-for="(item,index) in list" :key="index" @click="onSelect(item)">
                        <div class="item-box">

                            <div class="item-content">
                                <span>{{item.stop_name}}</span>
                                <van-button @click.stop="previewImg(item.pictures_link)" type="primary" size="small" color="#24C373">实地图</van-button>
                            </div>
                        </div>
                    </div>
                </m-list>
            </div>
        </div>
    </div>
</template>

<script>
  import list from '@/components/list/list';
  import {Search,ImagePreview } from 'vant';
  import {getStopGo,getStopLeave,getStopRoundLeave} from "../../../request/api";
  import {mapState} from 'vuex';

  // const http = process.env.VUE_APP_PATH;
  const http = process.env.NODE_ENV === 'development' ? process.env.VUE_APP_PATH : window.webConfig.webApiBasePath;

  export default {
    name: "chooseStation",
    components: {
      "m-list": list,
      [Search.name]: Search,
      [ImagePreview.Component.name]: ImagePreview.Component
    },
    /*
    * type: 站点类型：on 上车，off下车
    * tpId: 套票类型id：tplx001去程套餐、tplx002回程套餐、tplx003往返套餐
    * goId: 上车站点id：往返套餐选择下车站点时需要传入上车站点
    * */
    props: ['type','tpId','goId'],
    watch:{
      type: {
        handler(val){
          //上车点
          if (val === 'on'){
            this.barTitle = '去程上车点'
            return
          }
          //下车点
          this.barTitle = '回程下车点'
        },
        immediate: true
      },
      /*school: {
        handler(val){
          this.getStation(val);
        },
        immediate: true
      }*/
    },
    data() {
      return {
        barTitle: '去程上车点',

        searchValue: '',

        list: [],
        total: 0,
        limit: 10,
        page:1,
        loading: false,
        loadEnd: true
      }
    },
    computed: {
      ...mapState({
        schoolId: state => state.school.schoolId
      })
    },
    methods: {

      onSelect(data){
        let {type} = this,
          {stop_id,stop_name} = data,
          obj = type === 'on' ? {stop_id_go: stop_id,stop_name_go: stop_name} : {stop_id_leave: stop_id,stop_name_leave: stop_name}
        this.$emit('select',obj);
      },

      previewImg(url){
        if (!url){
          this.$Toast('当前站点没有图片');
          return
        }
        console.log(http + url);
        ImagePreview({
          images: [http + url],
          showIndex: false,
          overlayStyle: {
            "background": "rgba(0,0,0,0.5)"
          }
        });
      },

      onClose(){
        this.$emit('close');
      },
      getStation(school){
        let {type,tpId,schoolId,goId,list,loadEnd} = this,
          api =  '',
          data = {school_id: schoolId,shuttle_type: '定制'}
        if (type === 'off' && tpId === 'tplx003'){
          api = getStopRoundLeave;
          if (!goId) {
            this.$Toast('请先选择上车站点');
            this.loadEnd = !loadEnd;
            return;
          }
          data.stop_id = goId;
        }else {
          api = type === 'on' ? getStopGo : getStopLeave;
        }

        api(data).then(res => {
          if (res.errcode !== 0 )return;
          let data = res.row;

          this.list = data;
          this.loadEnd = !loadEnd;
          this.total = data.length;
          this.limit = data.length;

        })
      },
    },
  }
</script>

<style scoped lang="less">
.main{
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    .search-wrap{
        padding: 0 10px 10px 10px;
    }
    .list-wrap{
        flex: 1;
        height: 0;
        .item-wrap{
            padding: 0 10px;
            height: 50px;
            transition: all 0.1s linear;
            &.height0{
                height: 0;
                overflow: hidden;
            }
            .item-box{
                height: 100%;
                padding: 0 15px;
                background: #fff;
            }
            .item-content{
                display: flex;
                align-items: center;
                height: 100%;
                & > span{
                    flex: 1;
                    font-size: 17px;
                }
            }
            & + .item-wrap{
                .item-content{
                    border-top: 1px solid #dedede;
                }
            }
        }
    }
}
</style>
